<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Tutorial 10 - Mobile User Interfaces</title>
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/SketchingAndStates.html">Previous</a> / <a href="tutorials/App_States_Part_1.html">Next</a>
    </td></tr>
</table>

<h1>Tutorial 10 - Mobile User Interfaces</h1>

<div class='note'>
	When going through Maqetta's tutorials, it is suggested that you have two side-by-side
	browser windows open, one showing the tutorial, and the other where you run the application
	and perform the steps listed in the tutorial.<br/>
	<img src='img/SideBySideTutorialsApp.png' class='side_by_side'/>
</div>

<a name="about_this_tutorial"><h2>About this tutorial</h2></a>

<p>	This tutorial introduces how to use Maqetta to author mobile user interfaces.
	With Maqetta, you can drag/drop mobile widgets with device-native look-and-feel
	into a life-size replica of a mobile device. The resulting application
	will automatically adapt its styling to match native look-and-feel for the target device
	and will automatically include animated slide-in transitions from one "view" (i.e., a full screen of mobile content)
	to another view.</p>

<a name="choose_device_silhouette"><h2>Choosing a device</h2></a>

<p>Set up your authoring canvas to author inside of an iPhone silhouette as follows:</p>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Go to the Create menu at the top of the application, and issue a "Create Mobile Application" command.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Create dialog, click on the arrow on the device select control to show the list of possible devices
	that are supported by the current release of Maqetta.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Set the device to "iphone" using the drop-down menu. 
	You can either accept the default filename
	(e.g., <code>file1.html</code>) or enter a custom filename. Click on the Create button.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	The page canvas should now show a life-size silhouette of an iPhone.
	<p><a href="img/iphone_silhouette.png" target="_blank"><img alt="image" src="img/iphone_silhouette.png" style="margin: 1em 1em 0pt 0pt;" height="400" /></a></p>	
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Look at the toolbar. The second icon from the right is the Document Settings icon. 
	Press that icon and select the "Choose device" command, which will bring up the "Choose a device silhouette" dialog.
	The dialog looks as follows:
	<p><a href="img/choose_device_dialog.png" target="_blank"><img alt="image" src="img/choose_device_dialog.png" style="margin: 1em 1em 0pt 0pt;" width="150" /></a></p>
</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	The current release provides authoring support for a handful of popular mobile devices, including
	both phones and tablets, and supports authoring in both portrait and landscape.
	Use the Choose Device command
	to change to other silhouettes (e.g., Android phones, iPad, Blackberry).
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Switch between portrait and landscape modes by issuing a "Rotate device" command, also found on the Document Settings icon at the right side of the toolbar.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Using the same commands,
	go back to showing the iPhone silhouette in portrait mode.
	</li>
</ol>

<a name="dojox_mobile_widget_library"><h2>Introducing the dojox.mobile widget library</h2></a>

<p>Explore the various sections of the <b>Palette</b>.</p>
<p><a href="img/dojox_mobile_widgets.png" target="_blank"><img alt="image" src="img/dojox_mobile_widgets.png" style="margin: 1em 1em 0pt 0pt;" width="250px" /></a></p>	
<p>As you can see, the dojox.mobile widget library offers a wide variety of commonly used mobile widgets:
</p>
<ul>
	<li>View widgets - container widgets that represent switchable alternate views. Typically, one view appears at a time, and
		when the running application switches to a different view, the old view slides out and the new view slides in:
		<ul>
			<li><strong>ScrollableView</strong> - A container for a full page of mobile content, but which is scrollable (e.g., via a touch vertical-flick gesture).</li>
			<li><strong>SwapView</strong> - A container for a full page of mobile content, but which is swappable with alternate views (e.g., via a touch horizontal-flick gesture).</li>
			<li><strong>View</strong> - Usually, a View is used as a container for a (non-scrollable) full page of mobile content.</li>
		</ul>
	</li>
	<li>Heading widgets - These are widgets typically used at the top of a mobile screen:
		<ul>
			<li><strong>Heading</strong> - Heading (titlebar) widget.</li>
			<li><strong>ToolBarButton</strong> - A button widget that can be placed inside of a Heading widget.</li>
		</ul>
	</li>
	<li>List widgets - These are widgets that are used to display a list of information or choices:
		<ul>
			<li><strong>RoundRectCategory</strong> - A heading widget typically used above a RoundRectList or RoundRectDataList.</li>
			<li><strong>RoundRectList</strong> - A list of items displayed as a vertical stacked group of rounded rectangles. </li>
			<li><strong>RoundRectDataList</strong> - Same as RoundRectList, except data comes from a data store. </li>
			<li><strong>EdgeToEdgeCategory</strong> - A heading widget typically used above a EdgeToEdgeList or EdgeToEdgeDataList.</li>
			<li><strong>EdgeToEdgeList</strong> - A list of items displayed in a UI element that spans the full width of the screen. </li>
			<li><strong>EdgeToEdgeDataList</strong> - Same as EdgeToEdgeList, except data comes from a data store. </li>
			<li><strong>ListItem</strong> - Child widget for RoundRectList or EdgeToEdgeList.</li>
		</ul>
	</li>
	<li>Control widgets - These are low-level UI controls often used in forms:
		<ul>
			<li><strong>Buttons</strong>
				<ul>
					<li><strong>Button</strong></li>
					<li><strong>ToggleButton</strong></li>
				</ul>
			</li>
			<li><strong>Checkboxes, RadioButtons, Switch</strong>
				<ul>
					<li><strong>Checkbox</strong></li>
					<li><strong>RadioButton</strong></li>
					<li><strong>Switch</strong></li>
				</ul>
			</li>
			<li><strong>IconContainer</strong>
				<ul>
					<li><strong>IconContainer</strong></li>
					<li><strong>IconItem</strong></li>
					<li><strong>IconMenu</strong></li>
					<li><strong>IconMenuItem</strong></li>
				</ul>
			</li>
			<li><strong>Pickers</strong>
				<ul>
					<li><strong>Carousel</strong></li>
					<li><strong>DataCarousel</strong></li>
					<li><strong>DataPicker</strong></li>
					<li><strong>SpinWheel</strong></li>
					<li><strong>SpinWheelSlot</strong></li>
					<li><strong>SpinWheelDatePicker</strong></li>
					<li><strong>SpinWheelTimePicker</strong></li>
					<li><strong>TimePicker</strong></li>
					<li><strong>ValuePicker</strong></li>
					<li><strong>ValuePickerSlot</strong></li>
					<li><strong>ValuePickerDatePicker</strong></li>
					<li><strong>ValuePickerTimePicker</strong></li>
				</ul>
			</li>
			<li><strong>Select</strong>
				<ul>
					<li><strong>ComboBox</strong></li>
				</ul>
			</li>
			<li><strong>Sliders, Spinners</strong>
				<ul>
					<li><strong>Slider</strong></li>
				</ul>
			</li>
			<li><strong>TextBox</strong>
				<ul>
					<li><strong>TextBox</strong></li>
					<li><strong>ComboBox</strong></li>
					<li><strong>TextArea</strong></li>
				</ul>
			</li>
			<li><strong>Toolbars, ButtonBars</strong>
				<ul>
					<li><strong>TabBar</strong></li>
					<li><strong>TabBarButton</strong></li>
				</ul>
			</li>
			<li><strong>Other</strong>
				<ul>
					<li><strong>ProgressIndicator</strong></li>
					<li><strong>SearchBox</strong></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Container widgets:
		<ul>
			<li><strong>Accordion</strong></li>
			<li><strong>Container</strong></li>
			<li><strong>Container</strong></li>
			<li><strong>FixedSplitter</strong></li>
			<li><strong>GridLayout</strong></li>
			<li><strong>Pane</strong></li>
			<li><strong>RoundRect</strong></li>
			<li><strong>ScrollablePane</strong></li>
<!-- moved to untested temporarily for Preview 3
			<li><strong>Overlay</strong></li>
-->
		</ul>
	</li>
</ul>

<a name="setting_up_views"><h2>Setting up 2 different views</h2></a>

<p>Typically, mobile user interfaces consist of a series of different screens.
	For this tutorial we will create 2 of the screens using the "View" widget.
</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a View widget onto the page canvas.
	Notice that the page canvas now has a gray background. 
	This is because the first dojox.mobile widget added to the page
	brings in the CSS theme stylesheets that provide a native look-and-feel
	for a particular mobile device.
	<p><a href="img/Mobile_View_Widget_Added.png" target="_blank"><img alt="image" src="img/Mobile_View_Widget_Added.png" style="margin: 1em 1em 0pt 0pt;" height="400" /></a></p>	
	Also notice that there is a selection rectangle around the entire page.
	This is because the View is selected and it has default width and height of 100%.
	<div class="note">If you want the View to have dimensions, particularly height, less than 100%,
		you can change dimensions in the Layout section of the Properties palette.</div>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In order to allow easy authoring of multiple screens, 
	the Dojox Mobile widget uses the '<code>id</code>' attribute to put a referenceable name
	on widgets. To put a name on this View widget, open up the "Widget" palette (found on the top-right side of the application).
	and look at the top part of that palette.
	Type "root_view" as the value for the 
	'<code>id</code>' attribute and then hit Return to complete the operation.
	The top of the Properties palette should now show <code>for: View #root_view</code>:
	<p><a href="img/Mobile_ID_root_view.png" target="_blank"><img alt="image" src="img/Mobile_ID_root_view.png" style="margin: 1em 1em 0pt 0pt;" height="100" /></a></p>	
	<div class="note">Make sure that you entered the exact string "root_view".
		The tutorial won't work if the ID is not entered correctly.</div>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Look at the Scenes palette. Right now the "root_view" View is selected (as you can tell by the visibility symbol):
	<p><a href="img/Mobile_root_view_visible.png" target="_blank"><img alt="image" src="img/Mobile_root_view_visible.png" style="margin: 1em 1em 0pt 0pt;" height="100" /></a></p>		
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a Heading widget into the middle of the View.
	An edit box will appear that allows you to enter the text content for the Heading.
	<p><a href="img/Mobile_Heading_My_Mobile_App.png" target="_blank"><img alt="image" src="img/Mobile_Heading_My_Mobile_App.png" style="margin: 1em 1em 0pt 0pt;" height="275" /></a></p>
	Enter "My Mobile App" and click the OK button or hit Return to commit the Heading's text content.
	The Heading should now have the label "My Mobile App".
	</li>
<br/>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a second View widget onto the page canvas.
	Look at the Scenes palette and take note of the following:
	<br /><br />
	<ul>
		<li>The second View widget has been added as a sibling to the first
			View widget. By default, Maqetta makes a new View
			widget a sibling to an existing View widget when the new View
			is dropped onto the existing View.
			<div class="note">If you actually want the new View widget to be
			a child widget of the existing View widget, here are two options:
			<ul>
			<li>You can drop the View widget onto canvas, allow Maqetta to make the new
				View a sibling of the previous View, and then you can subsequently rearrange the
				widget hierarchy in the Outline palette by dragging/dropping 
				the new View widget onto the existing View widget.</li>
			<li>Before adding the second View (that you want to be a child of another View),
				you can turn on the Preference "When dragging, show candidate parents" found
				at Settings->Preferences->HTML->Visual Editor. This allows you to use the
				arrow keys during drag/drop widget creation to choose which existing widget should
				be the parent of the new View widget.</li>
			</ul>
			</div>
		</li>
		<li>The second View becomes selected and visible (just like what happens whenever a new
			widget is added), but additionally notice that the first View widget 
			is now <em>invisible</em> .
			With the Dojo Mobile toolkit, sibling View widgets work such that one and only one
			View widget is visible at any given time. Maqetta mimics this runtime behavior
			at author time by managing the visibility of View widgets such that
			whenever one View becomes visible, all sibling View widgets become invisible.</li>
	</ul>
<br/>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, alternatively click on the 
			first and second View widget. You will see that when one View widget
			is selected or made visible, the other View widget becomes invisible.
			For the following steps, make sure the second View is visible.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Select the second View widget by either switching to the second View in the Scenes
	palette, and then clicking inside the (empty) second view, or clicking
	on the second View widget in the Outline palette.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	With the second View widget selected, go to the top of the Properties palette 
	and type "alerts_view" as the value for the 
	'<code>id</code>' attribute and then hit Return to complete the operation.
	The top of the Properties palette should now show <code>for: View #alerts_view</code>
	<div class="note">Make sure that you entered the exact string "alerts_view".
		The tutorial won't work if the ID is not entered correctly.</div>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a Heading widget into the middle of the View.
	An edit box will appear that allows you to enter the text content for the Heading.
	Enter "Alerts" and click the OK button or hit Return to commit the Heading's text content.
	The Heading should now have the label "Alerts".
	</li>
</ol>

<a name="setting_up_views"><h2>Completing the root view</h2></a>

<p>Perform the following steps to add some content to the first View (i.e., the View with id="root_view"):
</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Select the first View so that the "My Mobile App" heading is visible on the page canvas.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a RoundRectList widget into the middle of the View.
	A data entry popup widget should appear, showing two lines that say "Item 1" and "Item 2".
	Replace the data with the following three lines:
	<pre>Alerts
Status
News</pre>
	The result should look like this:
	<p><a href="img/Mobile_Root_View_RectList.png" target="_blank"><img alt="image" src="img/Mobile_Root_View_RectList.png" style="margin: 1em 1em 0pt 0pt;" height="175" /></a></p>
	<div class="note">
		Note: You can edit the list of items either by double-clicking on the RoundRectList widget.
	</div>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Select the first list item ("Alerts").
	Go to the <b>Widget</b> palette.
	Press on the drop-down menu down arrow icon for the "moveTo" property. 
	You should see two values listed on the menu: "root_view" and "alerts_view". Choose "alerts_view" from the menu.
	<p><a href="img/Mobile_MoveTo_Alerts.png" target="_blank"><img alt="image" src="img/Mobile_MoveTo_Alerts.png" style="margin: 1em 1em 0pt 0pt;" height="330" /></a></p>
	After hitting Return, an arrow icon should appear on the right side of the "Alerts" list item:
	<p><a href="img/Mobile_MoveTo_Alerts_Arrow.png" target="_blank"><img alt="image" src="img/Mobile_MoveTo_Alerts_Arrow.png" style="margin: 1em 1em 0pt 0pt;" height="175" /></a></p>
	</li>
</ol>

<a name="setting_up_views"><h2>Completing the alerts view</h2></a>

<p>Perform the following steps to add some content to the second View (i.e., the View with id="alerts_view"):
</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Use the Scenes palette to select the second View (the "Alerts" View).
	<p><a href="img/Mobile_second_view_visible.png" target="_blank"><img alt="image" src="img/Mobile_second_view_visible.png" style="margin: 1em 1em 0pt 0pt;" height="100" /></a></p>
	You should see the heading with the word "Alerts" on the page canvas.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Widgets palette, go to the HTML section, and then into the Common sub-section. 
	Drag/drop a <code>&lt;div&gt;</code> widget 
	into the middle of the View. You will see a blue selection outline surrounding the empty DIV.
	Double-click on the empty DIV. 
	An edit box will appear that allows you to enter the text content for the Heading.
	Enter "Today's alerts" and click the OK button or hit Return to commit the text content.
	Go to the <b>Margins</b> palette.
	Find the property named "margin", enter the value "1em", and hit Return to commit the new margin value.
	<div class="note">For this step, be sure to enter a value for the shortcut property "margin"
		and not the more specific "margin-top", "margin-right", "margin-bottom" or "margin_left".</div>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop another <code>&lt;div&gt;</code> widget 
	into the middle of the View. You will see a blue selection outline surrounding the empty DIV.
	Double-click on the empty DIV. 
	An edit box will appear that allows you to enter the text content for the Heading.
	Enter "10:30am 85% capacity" and click the OK button or hit Return to commit the text content.
	Go to the <b>Margins</b> palette. You might have to click on the "show t/r/b/l" checkbox to
	show the margin-top, margin-right, margin-bottom, and margin-left properties.
	Find the property named "margin-left", enter the value "1em", and hit Return to commit the new margin value.
	<div class="note">You might have to click on the "show t/r/b/l" checkbox to expose
		the "margin-left" property.</div>
	<p><a href="img/Mobile_second_view_content.png" target="_blank"><img alt="image" src="img/Mobile_second_view_content.png" style="margin: 1em 1em 0pt 0pt;" height="300" /></a></p>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the Heading at the top to select it.
	Go to <b>Widget</b> palette.
	Enter "Home" as the value for the "Back" property and hit Return to commit the value.
	Now press on the drop-down menu down arrow icon for the "moveTo" property. 
	You should see two values listed on the menu: "root_view" and "alerts_view". Choose "root_view" from the menu.
	After completing these operations, a button labeled "Home" should appear on the left side of the Heading:
	<p><a href="img/Mobile_MoveTo_Root_Arrow.png" target="_blank"><img alt="image" src="img/Mobile_MoveTo_Root_Arrow.png" style="margin: 1em 1em 0pt 0pt;" height="100" /></a></p>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Use the Scenes palette to make the first View visible. Click on the View with 'id' of <code>root_view</code> so that you will now
	see the "My Mobile App" heading on the top of the page canvas.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click the Save icon to save this page.
</li>
</ol>

<a name="setting_up_views"><h2>Verifying against different devices and orientations</h2></a>

<p>Mobile user interfaces created with Dojox Mobile and Maqetta automatically
	restyle themselves based on the target device and orientation.
</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Use the Choose Device command on the Document Setting menu (found on the right side of the toolbar)
	to change to other silhouettes (e.g., Android phones, iPad, Blackberry).
	Notice that the page gets restyled to match the native look-and-feel for different devices.
	Here is a snapshot of how the root View looks with an Android theme.
	<p><a href="img/Mobile_root_view_android.png" target="_blank"><img alt="image" src="img/Mobile_root_view_android.png" style="margin: 1em 1em 0pt 0pt;" height="400" /></a></p>		
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Switch between portrait and landscape modes by issuing Rotate Device commands
	(also found on the Document Settings menu on the right side of the toolbar).
	Note that the user interface stretches to fit both landscape or portrait orientations.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Using the same two commands, go back to showing the iPhone silhouette in portrait mode.
	</li>
</ol>

<a name="setting_up_views"><h2>Preview and run your mobile application</h2></a>

<p>Now let's preview your mobile application and test its interactivity,
	including slide-in animations.
</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the toolbar, click the <b>Preview in Browser</b> icon <img class="inline" src="img/preview-browser.png" />. 
	This will launch a new browser window that contains the mobile application you just created
	running inside of the same mobile device silhouette as you see in the page editor,
	with controls at the top for switching devices, controlling zoom level and changing orientation
	(portrait vs. landscape).
	<p><a href="img/Mobile_preview_1.png" target="_blank"><img alt="image" src="img/Mobile_preview_1.png" style="margin: 1em 1em 0pt 0pt;" height="550" /></a></p>
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Use the controls at the top of the device to preview for different devices,
	zoom in and out, and switch orientation.
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the "Alerts" list item.
	This should cause a slide-in animation to transition from the root view to the alerts view.
	<p><a href="img/Mobile_preview_2.png" target="_blank"><img alt="image" src="img/Mobile_preview_2.png" style="margin: 1em 1em 0pt 0pt;" height="550" /></a></p>		
	</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the "Home" button.
	This should cause a slide-in animation to transition back from the alerts view to the root view.
	</li>
</ol>

<a name="saveas"><h2>Save as TutorialMobile.html</h2></a>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	On the page editor toolbar, click on the arrow next to the <strong>Save</strong> button 
	to bring up the Save menu, and click on "Save As".
	Then save your composition as "TutorialMobile.html".
	(We might use this file in subsequently in the Review/Commenting tutorial.)</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the file tab's close button -
	<img src='img/close_sel.gif' class='exact_size_inline_icon'/>
	- to close the page editor.
</li>
</ol>

<p class="prevnext"><a href="tutorials/SketchingAndStates.html">Previous</a> / <a href="tutorials/App_States_Part_1.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>
